<template>
  <div class="type-box">
    <div class="left-box">
      <div class="select-item">
        <span>算例类型</span>
        <el-select v-model="functionalModule" placeholder="请选择" style="width:260px;margin-left: 12px;">
          <el-option v-for="item in functionalModules" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="select-item">
        <span>数据分析 </span>
        <el-select v-model="analysisArea" style="width:260px;margin-left: 12px;">
          <el-option v-for="item in analysisAreas" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="right-box">
      <el-button text class="general-btn-action" @click="dataSubmit">数据提交</el-button>
    </div>
  </div>
  <hr class="line" />
  <div class="agent-bottom">
    <el-table :data="tableData"
      style="height: 100%; width: 100%;--el-table-border-color: none;overflow-y: auto;background-color: #192E37;"
      :row-class-name="getClassName" :header-cell-style="customHeaderCell" :cell-style="customCell">
      <el-table-column prop="agent" label="智能体" width="180" />
      <el-table-column prop="reward_function" label="奖励函数" width="300" />
      <el-table-column prop="interaction_type" label="交互类型" width="180" />
      <el-table-column prop="interaction_data_standard" label="交互数据规范" />
    </el-table>
  </div>
</template>
<script lang="ts" setup>
import { computed, defineComponent, ref, watch } from "vue";
import type { ImageProps } from 'element-plus'
import axios from "axios";
import { BASE_URL } from '@/utils/common.js'
import elTableMixin from '@/utils/elTableMixin.js'

const { customHeaderCell, customCell, getClassName } = elTableMixin();

const functionalModule = ref("");
const performanceIndicator = ref("");
const analysisArea = ref("");
// 下拉框初始化完毕
// 下拉框赋值
const functionalModules = ref([
  { value: "", label: "请选择" },
  { value: "integrated_energy", label: "综合能源" },
  { value: "distributed_grid", label: "分布式协同电网" },
  // ... 其他功能模块
]);


const analysisAreas = ref([

]);

const selectedFunctionalModule = computed(() => {
  return functionalModules.value.find(item => item.value === functionalModule.value);
});

const selectedAnalysisArea = computed(() => {
  var selectedItem = analysisAreas.value.find(item => item.value === analysisArea.value)
  //console.log("第二个选择框当前的值是::"+selectedItem);
  return selectedItem
})

watch(functionalModule, (newVal, oldVal) => {
  console.log("param1是::" + newVal);
  if (newVal === "integrated_energy") {
    analysisAreas.value = [
      { value: "optimizedControll", label: "优化控制" },
    ]
    analysisArea.value = 'optimizedControll'
  } else if (newVal === "distributed_grid") {
    analysisAreas.value = [
      { value: "faultProcess", label: "故障处置" },
    ]
    analysisArea.value = "faultProcess";
  }
  else {
    analysisAreas.value = []
    analysisArea.value = ''
  }
})

watch(analysisArea, (newVal, oldVal) => {
  console.log("第二个选择框当前的值是::" + newVal);
  analysisArea.value = newVal;
})

const dataSubmit = async () => {
  const formData = new FormData();
  formData.append('functionModule', selectedFunctionalModule.value.label);
  if (selectedAnalysisArea.value) {
    console.log("点提交时，选择框二的值是：：" + selectedAnalysisArea.value.label)
    formData.append('analysis', selectedAnalysisArea.value.label);
  }

  //console.log("选择的值是::"+selectedFunctionalModule.value.label);
  try {
    const response = await axios.post(BASE_URL + '/getAgentList', formData, {
      headers: {
        'Content-Type': 'application/json',
      },
    });
    console.log(response.data);
    tableData.value = response.data;

  } catch (error) {
    console.error(error);
  }

}

function simulateAndVerify() { }

//图片js
const fits = [
  'fill'

] as ImageProps['fit'][]
const url = ref(BASE_URL + "/getEmptyImg")
// 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'


//表格
const tableData = ref([]);


</script>

<style scoped lang="scss">
.agent-bottom {
  flex: 1;
  padding: 0 computeVw(16);
  margin-top: computeVh(20);
  box-sizing: border-box;
  overflow: hidden;
}

::v-deep .el-table__empty-block {
  width: 100% !important;
  height: computeVh(600) !important;
  font-size: computeVw(14);
  color: #FFFFFF !important;
}
</style>
